<template>
    <el-input v-model="model">
    <span v-if="suffix" slot="append">{{suffix}}</span>
    </el-input>
</template>
<script>
export default {
    name: 'suffixinput',
    props: {
        value: {
            type: String,
            default () {
                return "";
            }
        },
        suffix: { /*数据源链接*/
            type: String,
            default () {
                return "";
            }
        },
        cut: {
            type: Boolean,
            default () {
                return false;
            }
        }
    },
    data() {
        return {
            model: ""
        }
    },
    watch: {
        model(val) {
            this.$emit('input', this.fixValue(val));
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.model = this.reformValue(this.value);
        });
    },
    methods: {
        /* 
         * 输入：汉，没有后缀“族”，返回“汉”，input中显示“汉”
         * 输入：汉族，有后缀“族”，返回“汉”，input中显示“汉”
         */
        reformValue(value) {
            let suffix = this.suffix;
            if (suffix) {
                if (this.endWith(value, suffix)) {
                    return value.substring(0, value.length - suffix.length);
                }
            }
            return value;
        },
        /* 将 汉 变成 汉族 */
        fixValue(value) {
            let suffix = this.suffix;
            if (suffix && !this.cut) {
                /* 如果存在后缀，并且不设定截取，则加上suffix */
                return value + suffix;
            }
            /* 否则，直接返回input框中显示的值 */
            console.log("fixValue: %s", value);
            return value;
        },
        endWith(value, str) {
            if (str == null || str === "" || value.length === 0 || str.length > value.length) {
                return false;
            }
            if (value.substring(value.length - str.length) === str) {
                return true;
            }
            return false;
        }
    }
}
</script>